<template>
  <div class="table-ctrl-body">
    <!--表格组-->
    <div class="table-ctrl" style="padding-bottom: 30px;">
      <!--表格头-->
      <div class="table-header">
        <table class="table-default">
          <thead>
          <tr>
            <th class="checkbox-index">
              <input type="checkbox" :checked="tableIds.length === tableData.length" @click="checkedAll()">
            </th>
            <th v-for="item in headerTable">
              {{item.name}}
            </th>
            <th>修改</th>
          </tr>
          </thead>
        </table>
      </div>
      <!--表格中部-->
      <div class="table-overflowX">
        <table class="table-default">
          <tbody>
          <tr v-for="(trs,index) in tableData"
              @click.stop="checkedOne(trs.id)"
              class="tr-hover"
          >
            <td class="checkbox-index">
              <input type="checkbox" :checked="tableIds.indexOf(trs.id) > -1" >
            </td>
            <td>
              {{ trs.name }}
            </td>
            <td>
              {{ trs.policePhone }}
            </td>
            <td>
              {{ trs.policeRadioId }}
            </td>
            <td>
              {{ trs.policePosition }}
            </td>
            <td>
              {{ trs.sort }}
            </td>
            <td>
              {{ trs.secrit | filterSecrit }}
            </td>
            <td @click.stop="updataAddress(trs)">修改</td>
          </tr>
          </tbody>
        </table>
      </div>
    </div>
    <!--表格组End-->

  </div>
</template>

<script>
  export default {
    name: 'tableMate',
    props: {
      headerTable: Array,
      tableData: Array,
      clearCheckedAry: Boolean
    },
    data() {
      return {
        isCheckedAll: false, // 判断是否为全选
        tableIds: [],        //  全选的数据存放
      }
    },
    methods: {
      // 单选框全选事件
      checkedAll(){
        this.isCheckedAll = !this.isCheckedAll;
        if(this.isCheckedAll){
          // 全选时
          this.tableIds = [];
          this.tableData.forEach(function(item){
            this.tableIds.push(item.id)
          }, this)
        }
        else {
          this.tableIds = [];
        }
        this.$emit('checkedAryFn', this.tableIds);
        // //console.log(this.tableIds)
      },
      // 单选框单选事件
      checkedOne(id){
        let idIndex = this.tableIds.indexOf(id);
        if(idIndex >= 0){
          // 如果已经包含该id，则去除（单选按钮由选中变为非选中状态）
          this.tableIds.splice(idIndex, 1);
        }
        else {
          // 选中该checkbox
          this.tableIds.push(id);
        }
        this.$emit('checkedAryFn', this.tableIds);
        // //console.log(this.tableIds)
      },
      // 修改通讯录人员信息
      updataAddress(data){
        this.$emit('updataAddressFn', data)
        // //console.log(data)
      },

    },
    filters: {
      filterSecrit (val) {
        if (val == 1) {
          return '加密'
        } else {
          return '未加密'
        }
      }
    },
    watch: {
      clearCheckedAry() {
        this.tableIds = [];
      },
      tableData(){
        this.tableIds = [];
        this.isCheckedAll= false // 判断是否为全选
      }
    }
  }
</script>
<style scoped>
  .checkbox-index {
    width: 51px;
  }
</style>
